<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>05-搜索页</title>
    <link rel="stylesheet" type="text/css" href="../../css/base.min.css" />
    <link rel="stylesheet" href="../../css/vant.min.css">
    <style>
        html,
        body,
        .global-layout {
            height: 100%;
        }

        .global-layout-main {
            background: #f5f5f5;
        }

        #header>.pure-box .center {
            padding: 0;
        }

        #header>.pure-box .center input {
            height: 0.6rem;
            background: rgba(246, 246, 246, 1);
            border-radius: 0.33rem;
            font-size: 0.22rem;
            padding-left: 0.6rem;
        }

        #header .search .ico-search {
            position: absolute;
            left: 0.3rem;
            top: 50%;
            transform: translate(0, -50%);
            width: 0.2rem;
            height: 0.2rem;
        }

        #header .search {
            background: none;
        }

        #header>.pure-box .left {
            margin-right: 0.3rem;
        }

        .local-city {
            padding: 0.3rem;
            background: #fff;
        }

        .local-city .title {
            font-size: 0.28rem;
            color: #999;
        }

        .local-city .local {
            margin-top: 0.25rem;
        }

        .local-city .local img {
            margin-right: 0.12rem;
        }

        .local-city .local .city {
            height: 0.64rem;
            line-height: 0.64rem;
            padding: 0 0.2rem;
            background: rgba(39, 217, 197, 0.08);
            border: 1px solid rgba(39, 217, 197, 1);
            color: #27D9C5;
            border-radius: 0.08rem;
            margin-right: 0.3rem;
        }

        .local-city .local .renew {
            color: #B6B6B6;
            font-size: 0.24rem;
        }

        .switch {
            padding: 0.3rem;
            border-bottom: 0.2rem solid #F5F5F5;
            background: #fff;
        }

        .switch .switch-header {
            color: #999999;
            font-size: 0.28rem;
        }

        .switch .switch-main {
            margin-top: 0.3rem;
            display: flex;
            flex-wrap: wrap;
            opacity: 1;
            transition: opacity 0.5s;
        }

        .switch .switch-main .item {
            text-align: center;
            line-height: 0.66rem;
            padding: 0 0.2rem;
            border: 1px solid #F4F4F4;
            border-radius: 0.08rem;
            margin-right: 0.3rem;
            min-width: 1.88rem;
            margin-bottom: 0.3rem;
        }

        .switch .switch-main .item.active {
            background: rgba(39, 217, 197, 0.08);
            border: 1px solid rgba(39, 217, 197, 1);
            color: #27D9C5;
        }

        .city-item {
            line-height: 0.9rem;
            color: #333333;
            font-size: 0.28rem;
            background: #fff;
            padding: 0 0.3rem;
        }

        .index-anchor {
            padding: 0.3rem 0.3rem 0;
            font-size: 0.3rem;
            box-sizing: border-box;
            background-color: #fff;
        }

        .van-index-bar__index {
            font-size: 0.24rem;
            padding: 0.1rem;
        }

        .switch .switch-header .ico {
            width: 0;
            height: 0;
            border-top: 0 solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #AAAAAA;
            border-left: 6px solid transparent;
            display: inline-block;
            margin-left: 0.1rem;
            transition: transform 0.5s;
            transform: rotate(360deg);
            transform: scale(0.8);
        }

        .arrow_bottom_active {
            transform: rotate(0deg) !important;
            transition: transform 0.5s;
        }

        .arrow_bottom {
            width: 0.14rem;
            height: 0.08rem;
            margin-left: 0.1rem;
            transform: rotate(180deg);
        }
    </style>
</head>

<body>
    <div id="app" class="global-layout flex-box-y" v-cloak>
        <header id="header">
            <div class="pure-box flex-box-x">
                <div class="left flex-y-center" tapmode onclick="api.closeWin()">
                    <img class="ico" src="../../image/svg/ico_back.svg" alt="">
                </div>
                <div class="center col-xs-x flex-y-center">
                    <div class="search">
                        <img class="ico-search" src="../../image/svg/ico_search.svg" alt="">
                        <input type="search" class="text" v-model="searchText" @input="search" placeholder="请输入城市名称">
                    </div>
                </div>
            </div>
        </header>

        <template v-if="skeletonType">
            <van-skeleton title :row="3"></van-skeleton>
            <van-skeleton title :row="3"></van-skeleton>
            <van-skeleton title :row="3"></van-skeleton>
            <van-skeleton title :row="3"></van-skeleton>
            <van-skeleton title :row="3"></van-skeleton>
            <van-skeleton title :row="3"></van-skeleton>
            <van-skeleton title :row="3"></van-skeleton>
        </template>

        <template v-else>
            <template v-if="searchText == ''">
                <div class="global-layout-main col-xs-y scroll-y">
                    <div class="local-city">
                        <div class="title">定位城市</div>
                        <div class="local flex-y-center">
                            <div class="city flex-y-center"><span
                                    v-text="localcity ? localcity.categoryname : '定位中'"></span></div>
                            <div class="renew" @click="getLocal"><img src="../../image/svg/ico_refresh.svg" alt="">重新定位
                            </div>
                        </div>
                    </div>

                    <div class="switch">
                        <div class="switch-header flex-y-center">选择配送分仓 <img
                                :class="{'arrow_bottom_active' : switchCity}" class="arrow_bottom"
                                src="../../image/img_my/arrow_bottom.png" alt=""></div>
                        <template v-if="switchCity">
                            <div class="switch-main">
                                <div class="item" v-for="(vo,index) in hotList"
                                    :class="localcity && localcity.regionid === vo.id ? 'active' : ''" :key="index"
                                    v-text="vo.categoryname" @click="setCity(vo)"></div>
                            </div>
                        </template>
                    </div>


                    <div class="switch">
                        <div class="switch-header flex-y-center" @click="switchCity = !switchCity">切换区县 <img
                                :class="{'arrow_bottom_active' : switchCity}" class="arrow_bottom"
                                src="../../image/img_my/arrow_bottom.png" alt=""></div>
                        <template v-if="switchCity">
                            <div class="switch-main">
                                <div class="item" v-for="(vo,index) in regionList"
                                    :class="localcity && localcity.regionid === vo.id ? 'active' : ''" :key="index"
                                     v-if="(vo.categoryname.indexOf('县')!==-1 || vo.categoryname.indexOf('市')!==-1)" v-text="vo.categoryname" @click="setRegion(vo)">

                                  </div>
                            </div>
                        </template>
    </div>
    <van-index-bar :index-list="indexList" :sticky="false" highlight-color="#4385EA" class="city-list">
        <div v-for="(vo,index) in cityList" :key="index">
            <van-index-anchor class="index-anchor" :index="vo.name" v-text="vo.name"></van-index-anchor>
            <div class="city-item van-hairline--bottom" v-for="(val,key) in vo.list" :key="key" v-text="val.categoryname" @click="setCity(val)"></div>
        </div>
    </van-index-bar>
    </div>
    </template>
    <template v-else>
                <div class="global-layout-main col-xs-y scroll-y">
                    <div class="city-list">
                        <div class="city-item van-hairline--bottom" v-for="(vo,index) in searchList"
                            v-text="vo.categoryname" @click="setCity(vo)"></div>
                    </div>
                </div>
            </template>
    </template>
    </div>
</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/vant.js"></script>
<script type="text/javascript" src="../../util/util.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            searchText: '',
            switchCity: true,
            indexList: [],
            cityList: [],
            regionList: [],
            searchList: [],
            localcity: {"id":2608,"parentid":235,"categoryname":"平邑县","spell":"pingyixian","first_letter":"P"}, // 储存选中城市
            skeletonType: true, //骨架图状态
            cityid:'',
            categoryname:''
        },
        watch: {
            searchText: function(val) {
                if (val.length == 0) {
                    vm.searchList = [];
                }
            }
        },
        methods: {
            // 设置城市
            setCity(obj) {
                // getHasPermission('location', function(ret) {
                //     if (ret) {
                //         // var lon = vm.localcity.lon;
                //         // var lat = vm.localcity.lat;
                //     }
                // })
                vm.localcity = obj;
                api.setPrefs({
                    key: 'localcity',
                    value: JSON.stringify(vm.localcity)
                });
                vm.localCity();
                send_event('jobRefresh', {});
                api.closeWin();

            },

            // 设置地区
            setRegion(obj) {
              // alert(JSON.stringify(obj))
              get_data('api/home/get_store', {
                city_id:obj.parentid,
                region_name:obj.categoryname
              }, function(res) {
                  // alert(JSON.stringify(res))
                  //有分仓 是否需要切换
                  if(res.status == 0){
                    vm.changeCity(res.data,obj.id,obj.categoryname)

                  }else{
                    // 没有分仓
                    vm.localcity.regionid = obj.id;//obj.id;
                    vm.localcity.regionname = obj.categoryname;//obj.categoryname;
                    api.setPrefs({
                        key: 'localcity',
                        value: vm.localcity
                    });
                    send_event('jobRefresh', {});
                    api.closeWin();
                  }
                  //


               });

                // vm.localcity.regionid = obj.id;
                // vm.localcity.regionname = obj.categoryname;
                // api.setPrefs({
                //     key: 'localcity',
                //     value: vm.localcity
                // });
                // send_event('jobRefresh', {});
                // api.closeWin();
            },
            changeCity:function(localcity,cityid,categoryname){
              // alert(categoryname)
              vm.cityid = cityid;
              vm.categoryname = categoryname;
              var dialogBox = api.require('dialogBox');
              dialogBox.alert({
                texts: {
                  title: '提示',
                  content: '当前区县没有分仓，是否切换到'+localcity.region_name,
                  leftBtnTitle: '否',
                  rightBtnTitle: '是'
                },
                styles: {
                  bg: '#fff',
                  w: 295,
                  corner: 10,
                  title: {
                    marginT: 20,
                    titleSize: 17,
                    titleColor: '#444444'
                  },
                  content: {
                    marginT: 18,
                    marginB: 30,
                    color: '#444444',
                    size: 17
                  },
                  left: {
                    marginB: 0,
                    marginL: 0,
                    w: 147.5,
                    h: 55,
                    corner: 10,
                    // bg: 'widget://image/ico/ico_btn_left_bg.png',
                    bg: "#fff",
                    color: '#999999',
                    size: 16
                  },
                  right: {
                    marginB: 0,
                    marginL: 0,
                    w: 147.5,
                    h: 55,
                    corner: 10,
                    bg: '#fff',
                    color: '#005A93',
                    size: 16
                  },
                  horizontalLine: {
                    color: '#EEEEEE',
                    height: 1
                  },
                  verticalLine: {
                    color: '#EEEEEE', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
                    width: 1 //（可选项）数字类型；左右边按钮竖线的高度；默认：0
                  }
                }
              }, function (ret) {

                if (ret.eventType == 'left') {
                  var dialogBox = api.require('dialogBox');
                  //  alert(categoryname)
                  vm.localcity.id = vm.cityid;//obj.id;
                  vm.localcity.categoryname = vm.categoryname;//obj.categoryname;
                  // alert(JSON.stringify(vm.localcity))
                  api.setPrefs({
                      key: 'localcity',
                      value: vm.localcity
                  });
                  send_event('jobRefresh', {});

                  api.closeWin();
                  dialogBox.close({
                    dialogName: 'alert'
                  });

                } else if (ret.eventType == 'right') {

                  //切换其他分仓
                  // vm.localcity.id = cityid;//obj.id;
                  // vm.localcity.categoryname = categoryname;//obj.categoryname;
                  // api.setPrefs({
                  //     key: 'localcity',
                  //     value: vm.localcity
                  // });
                  // send_event('jobRefresh', {});
                  api.closeWin();
                  var dialogBox = api.require('dialogBox');
                  dialogBox.close({
                    dialogName: 'alert'
                  });
                }
              });
            },
            hotCity:function(){
              get_data('api/home/get_hot_list', {}, function(res) {
                // console.log(JSON.stringify(res))
                  if (res.status == 1) {
                      vm.hotList = res.data;
                  }
              })
            },
            // 获取列表
            getList: function() {

                get_data('api/home/get_city_list', {}, function(res) {

                    vm.skeletonType = false;
                    if (res.status == 1) {
                      // console.log(JSON.stringify(res.data))
                        var list = arraySoft(res.data);
                        var arr = [];
                        for (var i = 0; i < list.length; i++) {

                            arr.push(list[i].name);
                        }
                        vm.cityList = list;
                        vm.indexList = arr;
                    }
                    // console.log(JSON.stringify(vm.indexList))
                })
            },

            // 定位
            localCity: function() {
              // alert(JSON.stringify(vm.localcity))
                let params = {
                    id: vm.localcity.id
                };
                get_data('api/home/get_region_list', params, function(res) {
                  console.log(JSON.stringify(res))
                    if (res.status == 1) {
                        vm.regionList = res.data;
                    }
                })
            },

            // 搜索
            search() {
                var cityList = vm.cityList;
                let arr = [];
                let searchList = [];
                for (var i = 0; i < cityList.length; i++) {
                    arr = arr.concat(cityList[i].list);
                }

                for (var i = 0; i < arr.length; i++) {
                    if (arr[i].categoryname.indexOf(vm.searchText) != -1) {
                        searchList.push(arr[i]);
                    }
                }
                vm.searchList = searchList;
            },

            clearHistory: function() {
                vm.searchHistory = [];
                localStorage.removeItem('searchHistory');
            },

            // 根据经纬度获取地址
            getLocal: function() {
                api.removePrefs({
                    key: 'localcity'
                });

                localcity(function(ret, err) {
                    if (ret) {
                        vm.localcity = ret;
                        vm.localCity();
                        send_event('jobRefresh', {});
                    } else {
                        toast(err)
                    }
                })
            }
        },
    });

    apiready = function() {
        api.parseTapmode();
            // 获取城市列表
        vm.getList();
        vm.hotCity();

        // 获取储存的城市
        // localcity(function(ret) {
        //     if (ret) {
        //         vm.localcity = ret;
        //         vm.localCity();
        //         send_event('jobRefresh', {});
        //     } else {
        //         toast(err)
        //     }
        // })
    };
</script>
